<template>
  <div>
    <el-form :model="recommendForm" label-width="120px">
      <el-form-item label="简介">
        <el-input v-model="recommendForm.name" disabled />
      </el-form-item>
      <el-form-item label="载荷类型">
        <el-input v-model="recommendForm.ltName" disabled />
      </el-form-item>
      <el-form-item label="版本">
        <el-input v-model="recommendForm.version" disabled />
      </el-form-item>
      <el-form-item label="使用说明">
        <el-input v-model="recommendForm.useDesc" disabled />
      </el-form-item>
      <el-form-item label="操作系统">
        <el-input v-model="recommendForm.operSystem" disabled />
      </el-form-item>
      <el-form-item label="安装说明">
        <el-input v-model="recommendForm.installDesc" disabled />
      </el-form-item>
      <el-form-item label="子维度ID">
        <el-input v-model="recommendForm.subDimensionId" disabled />
      </el-form-item>
      <el-form-item label="版本及型号">
        <el-input v-model="recommendForm.deviceVersion" disabled />
      </el-form-item>
      <el-form-item label="端口">
        <el-input v-model="recommendForm.serviceName" disabled />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </span>
  </div>
</template>

<script>
import axios from "@/unil/index.js";

export default {
  name: "recommend",
  props: {
    toolId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      visible: true, // 控制弹出层显示
      recommendForm: {
        name: "",
        ltName: "",
        version: "",
        useDesc: "",
        operSystem: "",
        installDesc: "",
        subDimensionId: "",
        deviceVersion: "",
        serviceName: "",
      },
    };
  },
  mounted() {
    this.fetchRecommendations(); // 获取推荐数据
  },
  methods: {
    async fetchRecommendations() {
      console.log("工具ID:", this.toolId);
      if (!this.toolId) {
        return;
      }
      try {
        const response = await axios.get("/target/useRecommend", {
          params: { targetId: this.toolId },
        });
        if (response.data && response.data.length > 0) {
          this.recommendForm = response.data[0]; // 确保只赋值为对象
        } else {
          this.recommendForm = {
            name: "",
            ltName: "",
            version: "",
            useDesc: "",
            operSystem: "",
            installDesc: "",
            subDimensionId: "",
            deviceVersion: "",
            serviceName: "",
          }; // 重置表单数据
          this.$message.warning("未找到推荐数据");
        }
      } catch (error) {
        console.error("获取推荐数据失败:", error);
        this.$message.error("获取推荐数据失败，请稍后再试");
      }
    },
    closeDialog() {
      this.visible = false; // 关闭弹出层
      this.$emit("close"); // 通知父组件关闭
    },
  },
  watch: {
    toolId: {
      immediate: true,
      handler(newToolId) {
        console.log("监听到工具ID变化:", newToolId);
        if (newToolId) {
          this.fetchRecommendations(); // 工具ID变化时重新获取推荐数据
        }
      },
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
